<template>
	<yd-layout id='liveCourse' class=''>
		<header class="header" >
			<div class="header_children" v-if='$route.query.kind==1'>
				<img class="header_img" :src="dataObj.title_img" alt="" />
				<div class="time c_size_34_48" v-if='overYg'>
					<div>距开播还剩</div>
					<div>
						<yd-countdown :time="dataObj.time" :callback='timeCallback' timetype="datetime">
							<span>{%d} &nbsp;<i>天</i>&nbsp;&nbsp;</span>
							<span>{%h} &nbsp;<i>时</i>&nbsp;&nbsp;</span>
							<span>{%m} &nbsp;<i>分</i>&nbsp;&nbsp;</span>
							<span>{%s} &nbsp;<i>秒</i></span>
						</yd-countdown>
					</div>
				</div>
			</div>
			<!--:style="contentStyle"-->
			<div class="header_children_100" ref='headerChildrenRef' v-else @click='playVideo'>
				<div class="header_children_100_c">
					<div class="mengban" v-show="playBtn"></div>
					<!--:style="mengBanImgStyle"-->
					<div class="mengbanimg" v-show="playBtn" ></div>
					<img v-show='playBtn' src="../../assets/playBtn.png" alt="" />
					<div class="h5_player">
						<!--:poster="dataObj.title_img" -->
						<video id="test_video" 
							width="100%" 
							ref='videoRef' 
							height="30%" 
							x5-video-orientation="portraint" 
							webkit-playsinline="true" 
							playsinline="" x5-playsinline="" 
							x-webkit-airplay="allow" 
							@pause="pauseVideo" 
							@playing='playIngVideo' 
							:src="dataObj.url" preload=""
							 class="content_video text_left" style="position: 
							inherit;width:100%;"
							>
						</video>
						<!--:style="{height:dataObj.is_computer==1?'4.22rem':'5.5rem'}"-->
						<!--<video 
							:class="h5VideoFlg?'h5_video':''"
							webkit-airplay="true"  
							@pause="pauseVideo"
							@playing='playIngVideo'
							ref='videoRef'
							:style="contentStyle"
							id="videoID"
							webkit-playsinline="true" 
							playsinline="true"
							x5-video-player-type="h5"
							x5-video-player-fullscreen="false"
							width="100%" 
							height="100"
							preload="auto"  
							:poster="dataObj.title_img" 
							:src="dataObj.url"
						>-->
						</video>
					</div>
				</div>

				<!--<div class="cs" v-show="palyOpen">ces</div>-->
			</div>
		</header>
		<div class="content">
			<div class="live_title" style="border-bottom: .2rem solid #FCFAFA;">
				<div class="c_size_34_48 ">{{dataObj.title}}</div>
				<div v-if="$route.query.kind==2" class="time">直播时间：{{dataObj.liveTime}}</div>
				<div v-else class="time">{{dataObj.pv}}人观看</div>
			</div>
			<!--<div class="live_teacher">
				<img class="live_teacher_img" :src="dataObj.avatar" alt="" />
				<div class="live_teacher_right">
					<div class="teacher_name c_size_30_42 c_text_ellipsis_1">{{dataObj.nick_name}}</div>
					<span>{{dataObj.summary||'暂无相关介绍'}}</span>
				</div>
			</div>-->
			<div class="live_detail_f">
				<div class="title c_size_34_48 live_detail_f_title" style="border-bottom: 1px solid #FCFAFA;">课程简介</div>
				<div class="live_detail">
					<template v-if="courseObj.summary">
						<div class="c_v_html" v-html="courseObj.summary"></div>
					</template>
					<div v-else class="no_detail">
						暂无课程介绍
					</div>
				</div>
			</div>

		</div>
		<div class="c_go_home c_size_30_42" @click="$router.push({name:'index',query:{str:'index'}})">去首页</div>
		<!--输入密码-->
		<yd-popup v-model="showPop" position="center" :close-on-masker='false'>
			<div class="pop_nike_name">
				<div class="title c_size_34_48">该场直播已加密</div>
				<div class="pop_nike_name_input">
					<input placeholder="请输入六位直播密码" oninput="if(value.length>6)value=value.slice(0,6)" type="text" v-model="passwordNum" />
				</div>
				<ul class="c_size_34_48">
					<li @click="showPop=false">取消</li>
					<li @click="postPassword()">确定</li>
				</ul>
			</div>
		</yd-popup>
	</yd-layout>
</template>

<script>
	import { CountDown } from 'vue-ydui/dist/lib.rem/countdown';
	import { Popup } from 'vue-ydui/dist/lib.rem/popup';
	export default {
		components: {
			[CountDown.name]: CountDown,
			[Popup.name]: Popup,
		},
		data() {
			return {
				playBtn: true,
				palyOpen: false,
				h5VideoFlg: false,
				contentStyle: {},
				videoHeight: '',
				dataObj: {},
				mengBanImgStyle: {},
				mineObj: {},
				listObj: {},
				showPop: false,
				passwordNum: '',
				overYg: true,
				kindFlg2: false,
				courseObj: {},
			}
		},
		created() {
			this.getMine()

			if(this.$route.query.kind == 2) {
				this.kindFlg2 = true
				return
				this.$root.id = this.$route.query.id
				this.$root.uuid = (parseInt((parseInt(new Date() - 0)) / 1000)) + '' + (this.$root.userInfo.me.id || 0)
				this.$root.submitEvent({
					kind: 3,
				})
				this.$store.commit({
					type: 'setDataEvent',
					data: {
						kind: 3,
						position: 0,
						uuid: this.$root.uuid,
						oid: this.$route.query.id,
						uid: this.$root.userInfo && (JSON.stringify(this.$root.userInfo) != '{}') ? this.$root.userInfo.me.id : 0
					}
				})
			}
		},
		//销毁实例
		beforeDestroy() {
			return
			if(this.kindFlg2) {
				this.$root.submitEvent({
					kind: 3,
					lastFlg: true
				})
			}

		},
		watch: {

		},
		computed: {

		},
		async mounted() {
			//预告详情
			
			this.getcourseObj();
			if(this.$route.query.kind == 1) {
				document.title = '直播预告'
			} else {
				document.title = '直播回放'
			}
		},
		methods: {
			//获取课程简介
			getcourseObj() {
				this.$root.ajax({
					name: 'course',
					params: {
						id: this.$route.query.courseId
					},
				}).then((d) => {
					this.courseObj = d.data
					this.getTrailer()
				})
			},
			//预告结束
			timeCallback() {
				this.overYg = false;
			},
			//输入密码
			postPassword() {
				if(this.passwordNum.length == 6) {
					if(this.passwordNum == this.listObj.password) {
						this.showPop = false;
						this.videoPlayFunc()
					} else {
						this.$dialog.toast({
							mes: '请输入正确的六位密码',
							timeout: 1500
						});
					}
				} else {
					this.$dialog.toast({
						mes: '请根据提示正确输入',
						timeout: 1500
					});
				}
			},
			getTrailer() {
				let name = 'live/trailer'
				if(this.$route.query.kind == 2) {
					name = 'live'
				}
				this.$root.ajax({
					name: name,
					params: {
						id: this.$route.query.id
					}
				}).then((d) => {

					d.data.time = this.$root.getDate(new Date(d.data.begin_time * 1000), {
						str: '/',
						allTime: true
					})
					d.data.liveTime = this.$root.getDate(new Date(d.data.begin_time * 1000), {
						str: '-',
						allTime: true
					})
					if(this.$route.query.kind == 2) {
						d.data.newTitle = `${d.data.title}`
						this.mengBanImgStyle = {
							background: `url(${d.data.avatar}) no-repeat`,
							backgroundSize: `100% 100%`,
						}
					} else {
						d.data.newTitle = `【直播预告】${d.data.title}`
					}
					this.dataObj = Object.assign({}, this.dataObj, d.data)

					if(this.$root.isWeiXin()) {
						//分享

						let query = '';
						if(this.$root.config.channel) {
							query = `params=channelDY2FGoldUrlStrDYcourseClassFGkeyNumDY1FGparamsKey1DYidFGparamsVal1DY${this.$route.query.courseId}`
						} else {
							query = `params=oldUrlStrDYcourseClassFGkeyNumDY1FGparamsKey1DYidFGparamsVal1DY${this.$route.query.courseId}`
						}
						this.$root.wxShare({
							d: {
								title: this.dataObj.newTitle,
								title_img: this.courseObj.title_img
							}, //分享对象，题目等
							query: query, //参数
							desc: this.courseObj.share_summary
						})
					}
				})
			},
			playVideo() {
				this.$nextTick(() => {
					this.videoHeight = document.getElementById('app').clientHeight + 'px'
					this.contentStyle = {
						width: '100%',
						//height: ((contentHight-headerHight-btnHight) / 100 * 2-0.32) + 'rem',
						height: this.videoHeight,
					}
					//this.mineObj
					//this.dataObj
					//非（视频需要会员，且已经开通会员）
//					if(this.dataObj.member == 1) {
//						if(this.mineObj.member_status != 1) {
//							//弹出开通会员框
//							this.$dialog.confirm({
//								title: '温馨提示',
//								mes: '该场直播需要开通会员权限才能观看',
//								opts: [{
//										txt: '取消',
//										color: '#999999',
//										callback: () => {
//
//										},
//									},
//									{
//										txt: '开通会员',
//										color: '#35BF7E',
//										callback: () => {
//											this.$router.push({
//												name: 'vipOpen'
//											})
//										}
//									},
//								]
//							});
//							return
//						}
//					}
//					//判断是否需要密码
//					this.listObj = {};
//					if(this.dataObj.password) {
//						//弹出密码框
//						this.showPop = true;
//						this.listObj = Object.assign({}, this.listObj, this.dataObj)
//						this.passwordNum = ''
//						return
//					}
					this.videoPlayFunc()
					//myVideo.setAttribute('height',document.getElementById('app').clientHeight)
				})
			},
			videoPlayFunc() {
				var myVideo = this.$refs.videoRef;
				myVideo.play();
				this.playBtn = false
				this.palyOpen = true
				this.h5VideoFlg = true
			},
			pauseVideo() {
				this.palyOpen = false
			},
			playIngVideo() {
				var myVideo = this.$refs.videoRef;
				myVideo.setAttribute('controls', 'controls')
				this.palyOpen = true
			},
			getMine() {
				this.$root.ajax({
					name: 'my',
					params: {}
				}).then((d) => {
					this.mineObj = Object.assign({}, this.mineObj, d.data)
				})
			},
		}
	}
</script>

<style lang="scss">
	@import './liveCourse.scss';
</style>